<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <el-select v-model="queryParams.status" placeholder="请选择" @change="changeOption">
          <el-option label="结算状态" value=""></el-option>
          <el-option label="未结算" :value="0"></el-option>
          <el-option label="已结算" :value="1"></el-option>
        </el-select>
      </div>
    </div>
    <div class="content">
      <div class="table" v-loading="loading">
        <el-table
          border
          :data="tableData"
        >
          <el-table-column
            prop="year"
            label="结算周期"
            min-width="150"
            align="center"
            fixed="left"
          >
            <template v-slot="{row}">
              {{row.year}} - {{row.month}}
            </template>
          </el-table-column>
          <el-table-column
            prop="stickerOrderNum"
            label="总订单数"
            min-width="100"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="stickerFee"
            label="总代发服务费"
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="FLShipmentNum"
            label="总头程票数"
            min-width="120"
            align="center"
          ></el-table-column>

          <el-table-column
            prop="FLShipmentFee"
            label="总头程服务费"
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="middleOrderNum"
            label="总送仓票数"
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="middleOrderFee"
            label="总送仓服务费"
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="labelOrderNum"
            label="总贴标票数"
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="labelOrderFee"
            label="总贴标服务费"
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="totalFee"
            label="总结算费用（元）"
            min-width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            min-width="100"
            align="center"
          >
            <template v-slot="{row}">
              {{row.status === 1 ? '已结算' : '未结算'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="op"
            label="操作"
            min-width="200"
            fixed="right"
          >
            <template v-slot="{row}">
              <el-button @click="jumpInfo(row)" type="view">查看</el-button>
              <el-button @click="excel(row)" type="primary" :loading="downloadLoading">导出</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-wrap">
          <el-pagination
            @current-change="getData"
            :current-page="queryParams.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryParams.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {exportSettleById, getSettlementList} from "@/api/middle";
import {EventBus} from "@/utils/eventBus";

export default {
  name: "middleSettlementList",
  data(){
    return {
      loading: false,
      queryParams: {
        page: 1,
        pageSize: 20,
        status: '',
      },
      total: 0,
      tableData: [],
      downloadLoading: false,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      this.loading = true
      getSettlementList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.total = res.info.total
          this.tableData = res.data
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    jumpInfo(row){
      this.$router.push({
        name: 'middleSettlementInfo',
        query: {
          id: row.id
        }
      })
    },
    excel(row){
      this.downloadLoading = true
      const params = {
        page: 1,
        pageSize: 30000,
        settleId: row.id
      }
      exportSettleById(params)
        .then(res=>{
          this.downloadLoading = false
          if(res.error === 0){
            if(res.data.excelPath){
              window.open(res.data.excelPath,"_blank");
            }else{
              EventBus.$emit('showExportDraw')
            }

          }
        })
    }
  }
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 20px;
  .content{
    margin-top: 20px;
  }
}
</style>
